<template>
  <div class="instruction">
    <div class="instruction__questions">
      <ul>
        <li v-for="(item,index) in question_list" :key="index" :class="item.item_class">
          <div class="title" @click="linkTo(item.to)" v-if="item.to">{{item.title}}
          <span  class="fright iconfont icon-xiala2"></span>
          </div>
          <div @click="toggleQuestion(index)" class="title" v-else>{{item.title}}
            <span size="25" class="fright iconfont icon-xiala2" ></span>
          </div>
          <div class="content" v-html="item.content"></div>
        </li>
      </ul>
    </div>
  </div>
</template>


<script>
    import cdzsm from "@/assets/image/shuomin.png";
    export default {
        data() {
            return {
                cdzsm: cdzsm,
                imgUrl:'@assets/image/functions/cdzsm.png',
                question_list_source:[
                    {"title":"充电收费须知","content":"智能充电桩收费按照不同城市不同物业的收费标准会有不同的价格，具体的费用请扫码知晓。","to":""},
                    {"title":"微信充电使用步骤","content":"现在的计费标准，每个城市都是自己设置的，电动车功率不同，功率大的费用也相对高一些。","to":"/gzh_instruction"},
                    {"title":"充值卡充电说明","content":"第一步、选择空闲插座插入电动自行车充电器<br>" +
                            "第二步、用充值卡在充电站刷卡区刷卡，然后根据语音选择对应的插座充电以及充电时间。<br>" +
                            "第三步、按键输入插座端口按#键确认。<br>" +
                            "第四步、按键输入充电时间按#键确认。","to":""},
                    {"title":"功能介绍","content":"正常情况下，在电池接近充满的时候，会进入涓流充电期，等功率在很低的状态下保持一段时间，系统判断电池充满了，才会自动断电。","to":"/functions"},
                    {"title":"充电桩面板说明","content":"","to":""},
                    {"title":"常见问题","content":"现在的计费标准，每个城市都是自己设置的，电池剩余电量不同，充电的功率会有差异，功率大的费用也相对高一些。","to":"/questions"},
                ],
                question_list:[]
            };
        },
        methods:{
            toggleQuestion(index){
                this.initQuestionList()
                let liObj=this.question_list[index];
                liObj.item_class="item_choose";
                this.$set(this.question_list, index, liObj);
            },
            linkTo(to){
                this.$router.push(to);
            },
            initQuestionList(){
                this.question_list_source.forEach(item=>{
                    item.item_class="item_not_choose"
                    if(item.title=='充电桩面板说明')
                    {
                        item.content="<img style='width: 100%' src='"+this.cdzsm+"'/>"
                    }
                })
                this.question_list=this.question_list_source
            }
        },
        mounted() {
            this.initQuestionList()
        }
    };
</script>
<style>
.item_not_choose{
  background: #020D3E;
}
.icon{
  float: right;
}
</style>
